<script setup lang="ts">
  import ReservationRecordBody from "@/apps/client/components/ReservationRecordBody.vue";
  import CubicleReservationRecordHead from "@/apps/client/components/CubicleReservationRecordHead.vue";


  defineProps<{
    data: object
  }>()

  // 定义 emit 事件
  const emit = defineEmits<{
    (event: 'cancel'): void;
  }>();


  // 处理取消预约
  function handleCancelReservation() {
    emit('cancel');
  }
</script>

<template>
  <van-cell-group inset>
    <CubicleReservationRecordHead
      :data="data"
    />
    <ReservationRecordBody
      :data="data"
      @cancel="handleCancelReservation"
    />
  </van-cell-group>

</template>

<style scoped>

</style>